<template>
  <Layout>
    <MyHeader></MyHeader>
    <Layout>
      <Sider hide-trigger :style="{ background: '#fff' }">
        <Common :menuList="menuList" :menu="menu" ref="menu" />
      </Sider>
      <Layout :style="{ padding: '0 24px 24px' }">
        <Content :style="{ padding: '24px', minHeight: '100vh', background: '#fff' }">
          <Tabs>
            <TabPane :label="formTitle + '列表'">
              <Button type="success" @click="add">添加</Button>
              <Form inline v-if="search.length > 0">
                <FormItem v-for="(v, k) in search" :key="k">
                  <Input v-if="v.type == 'text' || v.type == 'textarea'" v-model="searchValue[k]" :type="v.type"
                    :placeholder="(v.type == 'radio' || v.type == 'checkbox' || v.type == 'select' ? '请选择' : (/.*?_img/.test(k) ? '请上传' : '请填写')) + v.title"
                    :clearable="true"></Input>
                  <Input v-if="v.type == 'number'" v-model="searchValue[k]" type="text" :step="v.step ?? 1"
                    :placeholder="(v.type == 'radio' || v.type == 'checkbox' || v.type == 'select' ? '请选择' : (/.*?_img/.test(k) ? '请上传' : '请填写')) + v.title"
                    :clearable="true"></Input>
                  <DatePicker @on-open-change="setDateName(k)" @on-change="dateChange" v-if="v.type == 'date'"
                    type="date" v-model="searchValue[k]" format="yyyy-MM-dd" :show-week-numbers="true"
                    :placeholder="(v.type == 'radio' || v.type == 'checkbox' || v.type == 'select' ? '请选择' : (/.*?_img/.test(k) ? '请上传' : '请填写')) + v.title"
                    :clearable="true"></DatePicker>
                  <Select v-if="v.type == 'select'" v-model="searchValue[k]" filterable
                    :placeholder="(v.type == 'radio' || v.type == 'checkbox' || v.type == 'select' ? '请选择' : (/.*?_img/.test(k) ? '请上传' : '请填写')) + v.title"
                    :clearable="true">
                    <Option v-for="(v1, k1) in v.list" :key="k1" :value="v1.id" :selected="v.value == v1">
                      <Icon v-if="k == 'icon'" :type="v1.id" /><span v-if="v1.pid && v1.pid != 0">└</span>{{ v1.title }}
                    </Option>
                  </Select>
                </FormItem>
                <Button type="success" @click="getList(1)">搜索</Button>
              </Form>
              <Table :columns="fields" :data="list" style="margin-top:1rem;"></Table>
              <Page :total="total" style="margin-top:1rem;" @on-change="onChange"></Page>
            </TabPane>
          </Tabs>
        </Content>
      </Layout>
    </Layout>
  </Layout>
</template>
<script>
import Common from '@/components/public/common.vue';
import MyHeader from '@/components/public/header.vue';
import {
  Form,
  FormItem,
  Input,
  DatePicker,
  Select,
  Option,
  Icon,
  Layout,
  Header,
  Content,
  Tabs,
  TabPane,
  Table,
  Button,
  Page,
  Sider
} from 'view-ui-plus';
export default {
  props: [
    'menuList', 'menu'
  ],
  components: {
    Form,
    FormItem,
    Input,
    DatePicker,
    Select,
    Option,
    Icon,
    Common,
    Layout,
    Header,
    Content,
    Tabs,
    TabPane,
    Table,
    Button,
    Page,
    Sider,
    MyHeader
  },
  data() {
    return {
      addUrl: '',
      fields: [],
      list: [],
      total: 0,
      formTitle: '',
      search: [],
      searchValue: []
    }
  },
  methods: {
    dateChange(e) {
      this.form[localStorage.getItem('dateName')] = e;
      localStorage.removeItem('dateName');
    },
    add() {
      this.$router.push({ path: this.addUrl }).catch(() => { });
    },
    onChange(param) {
      this.getList(param);
    },
    getList(page) {
      let temp = this.$route.fullPath.split('/'), query = '?';
      query += 'page=' + page;
      this.addUrl = '/admin/' + temp[2] + '/' + temp[2] + 'Add';
      let param = {}
      for (let i = 0; i < this.search.length; i++) {
        param[this.search[i].key] = this.searchValue[i]
      }
      this.$submit('' + this.$route.fullPath + query, param, (res) => {
        this.formTitle = res.data.formTitle;
        for (let k in res.data.fields) {
          res.data.fields[k].title = res.data.fields[k].title.split('：')[0]
          if (/_img$/.test(res.data.fields[k].key)) {//图片特殊处理
            res.data.fields[k].render = (h, params) => {
              return h('img', {
                src: params.row[res.data.fields[k].key],
                style: {
                  maxWidth: '32px',
                  maxHeight: '32px'
                }
              });
            }
          }
        }
        this.fields = res.data.fields;
        this.total = res.data.total;
        this.fields.push({
          title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                class: 'ivu-btn ivu-btn-primary',
                style: {
                  marginRight: '5px'
                },
                onClick: () => {
                  let temp1 = '/admin/' + temp[2] + '/' + temp[2] + 'Add';
                  this.$router.push({ path: temp1, query: { id: params.row.id } }).catch(() => { });
                }
              }, '编辑'),
              h('Button', {
                class: 'ivu-btn ivu-btn-error',
                onClick: () => {
                  this.$Modal.confirm({
                    title: '确定删除？',
                    onOk: () => {
                      let temp1 = '/admin/' + temp[2] + '/' + temp[2] + 'Del';
                      this.$submit(temp1, { id: params.row.id, del: true }, (res1) => {
                        if (temp[2] == 'menu') {
                          this.$getmenu(false)
                        }
                        this.getList(this.page)
                      })
                    }
                  });
                }
              }, '删除')
            ]);
          }
        });
        this.list = res.data.data
        //搜索处理
        this.search = res.data.search
        let searchValue = []
        for (let i = 0; i < this.search.length; i++) {
          searchValue.push(this.search[i].value)
        }
        this.searchValue = searchValue
      })
    }
  },
  mounted() {
    let page = 1;
    if (typeof this.$route.query.page != 'undefined') {
      page = this.$route.query.page;
    }
    this.getList(page);
  },
  watch: {
    '$route': function (to, from) {
      this.getList(1);
    }
  }
}
</script>
<style scoped>
.ivu-form-item {
  margin-bottom: 0;
}
.ivu-tabs-tabpane{
  text-align: left;
}
</style>